<template>
  <form>
    <div class="mb-3">
        <label for="exampleInputEmail0" class="form-label">邮箱地址:</label>
        <validate-input :rules="emailRules" v-model="emailValue" placeholder="请输入邮箱地址"></validate-input>
        子组件的值：{{emailValue}}
    </div>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
    <input 
        type="email" 
        class="form-control" 
        id="exampleInputEmail1" 
        v-model="emailRef.val"
        @blur="validateEmail"
        >
        <div :style="{color: 'red'}" v-if="emailRef.error">{{emailRef.message}}</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPasswordw2" class="form-label">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck2">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</template>

<script lang='ts'>
import {defineComponent,reactive,ref} from 'vue'
import validateInput,{RuleProps} from '../validateInput/validateInput.vue'
export default defineComponent({
    components:{
        validateInput
    },
    setup() {
        const emailValue = ref('哈哈')
        const emailRules:RuleProps = [
            {type: 'required',message: '邮箱地址不能为空！！！'},
            {type: 'email',message: '请输入正确的邮箱！！！'}
        ]
        const emailRef = reactive({
            val: '',
            error: false,
            message: ''
        })
        const emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        const validateEmail = () => {
            if (emailRef.val.trim() == '') {
                emailRef.error = true,
                emailRef.message = '邮箱地址不能为空！！！'
            } else if (!emailReg.test(emailRef.val)) {
                emailRef.error = true,
                emailRef.message = '请输入正确的邮箱！！！'
            } else {
                emailRef.error = false
            }
        }
        return {
            validateEmail,
            emailRef,
            emailRules,
            emailValue
        }
    }
})
</script>

<style>

</style>